{% extends "base.html" %}

{% block title %}数据分析 - SurveyAnalyzer{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('main.index') }}">
                <i class="fas fa-home me-1"></i>
                首页
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ url_for('main.upload_file') }}">
                <i class="fas fa-upload me-1"></i>
                数据上传
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-chart-bar me-1"></i>
            数据分析
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="row">
    <!-- 数据概览 -->
    <div class="col-md-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    数据概览
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>文件名：</strong>
                    <span class="text-muted">{{ data_info.filename }}</span>
                </div>
                <div class="mb-3">
                    <strong>数据维度：</strong>
                    <span class="badge bg-primary">{{ data_info.shape[0] }} 行</span>
                    <span class="badge bg-info">{{ data_info.shape[1] }} 列</span>
                </div>
                
                <div class="mb-3">
                    <strong>数值列：</strong>
                    <span class="badge bg-success">{{ data_info.numeric_columns|length }}</span>
                </div>
                
                <div class="mb-3">
                    <strong>分类列：</strong>
                    <span class="badge bg-warning">{{ data_info.categorical_columns|length }}</span>
                </div>
                
                <div class="mb-3">
                    <strong>缺失值：</strong>
                    {% set total_missing = data_info.missing_values.values()|sum %}
                    {% if total_missing > 0 %}
                        <span class="badge bg-danger">{{ total_missing }}</span>
                    {% else %}
                        <span class="badge bg-success">无</span>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 快速操作 -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-bolt me-2"></i>
                    快速操作
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('main.visualize', filename=data_info.filename) }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-chart-pie me-1"></i>
                        数据可视化
                    </a>
                    <a href="{{ url_for('main.cluster', filename=data_info.filename) }}" class="btn btn-success btn-sm">
                        <i class="fas fa-project-diagram me-1"></i>
                        聚类分析
                    </a>
                    <a href="{{ url_for('main.ai_analysis', filename=data_info.filename) }}" class="btn btn-info btn-sm">
                        <i class="fas fa-brain me-1"></i>
                        AI分析
                    </a>
                    <a href="{{ url_for('main.advanced', filename=data_info.filename) }}" class="btn btn-warning btn-sm">
                        <i class="fas fa-cogs me-1"></i>
                        高级分析
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 数据预览 -->
    <div class="col-md-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-table me-2"></i>
                    数据预览
                </h5>
                <button class="btn btn-outline-primary btn-sm" onclick="startAnalysis()">
                    <i class="fas fa-play me-1"></i>
                    开始分析
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <tr>
                                {% for column in data_info.columns %}
                                <th>{{ column }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in data_preview %}
                            <tr>
                                {% for column in data_info.columns %}
                                <td>{{ row[column] if row[column] is not none else '-' }}</td>
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 分析结果区域 -->
<div class="row" id="analysisResults" style="display: none;">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-chart-line me-2"></i>
                    分析结果
                </h5>
            </div>
            <div class="card-body">
                <div id="analysisContent">
                    <!-- 分析结果将在这里显示 -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function startAnalysis() {
    const filename = '{{ data_info.filename }}';
    const analysisResults = document.getElementById('analysisResults');
    const analysisContent = document.getElementById('analysisContent');
    
    // 显示加载状态
    analysisContent.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">分析中...</span>
            </div>
            <p class="mt-2">正在进行数据分析，请稍候...</p>
        </div>
    `;
    analysisResults.style.display = 'block';
    
    // 调用API进行分析
    fetch(`/api/analyze/${filename}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            analysisContent.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    分析失败：${data.error}
                </div>
            `;
        } else {
            displayAnalysisResults(data);
        }
    })
    .catch(error => {
        analysisContent.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                分析失败：${error.message}
            </div>
        `;
    });
}

function displayAnalysisResults(data) {
    const analysisContent = document.getElementById('analysisContent');
    
    let html = '<div class="row">';
    
    // 基本统计
    if (data.basic_stats) {
        html += `
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-calculator me-2"></i>
                            描述性统计
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>指标</th>
                                        <th>值</th>
                                    </tr>
                                </thead>
                                <tbody>
        `;
        
        for (const [key, value] of Object.entries(data.basic_stats)) {
            if (typeof value === 'object') {
                for (const [subkey, subvalue] of Object.entries(value)) {
                    html += `<tr><td>${key} - ${subkey}</td><td>${typeof subvalue === 'number' ? subvalue.toFixed(3) : subvalue}</td></tr>`;
                }
            } else {
                html += `<tr><td>${key}</td><td>${typeof value === 'number' ? value.toFixed(3) : value}</td></tr>`;
            }
        }
        
        html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    // 相关性分析
    if (data.correlation) {
        html += `
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-link me-2"></i>
                            相关性分析
                        </h6>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">相关性矩阵已生成，建议查看可视化图表获得更好的展示效果。</p>
                        <a href="{{ url_for('main.visualize', filename=data_info.filename) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-chart-pie me-1"></i>
                            查看相关性热力图
                        </a>
                    </div>
                </div>
            </div>
        `;
    }
    
    html += '</div>';
    
    analysisContent.innerHTML = html;
}
</script>
{% endblock %}